<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户信息编辑页面</title>
</head>
<body>
<table id="tbl"></table>
<form id="editUsersInfo" style="display: none">
    姓名：<input type="text" name="uname"><br>
    密码：<input type="password" name="pass"><br>
    <input type="hidden" name="line">
    <input type="button" value="确认修改" id="editOk">
</form>
<script type="text/javascript">
    var tbl = document.querySelector('#tbl');
    var fom = document.querySelector('#editUsersInfo');
    var userInfo = localStorage.getItem('users');//得到的是字符串形式的
    if(!userInfo){
        alert("用户信息为空");
        throw"用户信息为空";
    }
    userInfo=JSON.parse(userInfo);//得到数组形式的内容
    function showTable(userInfo) {
        var tbl_text = userInfo.map(function (item, index) {
            return `
        <tr id="${item.name}">
        <td>${item.name}</td>
        <td>${item.pass}</td>
        <td>
        <a href="javascript:edit('${item.name}',${index})">修改</a>
        </td>
        </tr>
        `;
        }).join("");//join(""):将数组转换成字符串
        tbl.innerHTML = tbl_text;
    }
    showTable(userInfo);

    function edit(id,index){
        fom.style.display='block';
        fom.uname.value=userInfo[index].name;
        fom.pass.value=userInfo[index].pass;
        fom.line.value=index;

    }

    var editOk=document.getElementById('editOk');
    editOk.onclick=function(e){
        //1、让表单隐藏
        fom.style.display="none";

        //2、要修改对应的行
        var aa=userInfo[fom.line.value];
        aa.name=fom.uname.value;
        aa.pass=fom.pass.value;

       // 3、修改的值要重新映射到表格
        showTable(userInfo);

        //4、修改的信息要重新存入到本地存储
        localStorage.setItem('users',JSON.stringify(userInfo));
    }

</script>

</body>
</html>